<template>
  <div class="person-info-table-con bg-white" id="person_info_table" :class="IOSfull ? 'IOSfull' : ''">
    <div :class="rotate ? 'TableY' : $q.fullscreen.isActive ? 'Nrotate' : 'Nrotate2'">
      <HeadTitle :title="'人员管理'" />
      <PersonInfoTable ref="child" />
    </div>
  </div>
</template>

<script>
import PersonInfoTable from './personInfoTable'
import { mapGetters } from 'vuex';
import HeadTitle from 'src/components/headTitle.vue';
import wetherScroll from 'src/components/mixins/wetherScroll.js'

export default {
  mixins: [wetherScroll],
  components: {
    PersonInfoTable,
    HeadTitle
  },
  data() {
    return {
      rotate: false,
      IOSfull: false,
      colorShow: false
    }
  },
  computed: {
    ...mapGetters(['themeColor', 'device']),
  },
  watch: {
    '$q.fullscreen.isActive'(val) {
      this.$route.path == '/personAdmini' && this.device == 'mobile' ? this.rotate = val : this.rotate = false;
      if (this.rotate) {
        this.wetherScroll();
      } else {
        this.removeWetherScroll();
      }
    },
  },
  methods: {
    searchShowClick() {
      this.colorShow = !this.colorShow;
      this.$refs.child.searchShowClick();
    },
    add() {
      this.$refs.child.handlerAddSensor();
    },
    /**
     * 全屏
     */
    toggleFullscreen() {
      this.$nextTick(_ => {
        let dom = document.getElementById('person_info_table')
        let nav = window.navigator
        let ua = nav.userAgent

        if (/iPhone|iPod|iPad/.test(ua)) {
          this.IOSfull = !this.IOSfull
          let con = document.getElementsByClassName('container-app')
          if (this.IOSfull) {
            dom.style.width = window.innerHeight + 'px'
            con[0].style.padding = '0px'
          } else {
            dom.style.width = ''
            con[0].style.padding = '30px'
          }
        } else {
          this.$q.fullscreen.toggle(dom).then(_ => {
          }).catch(error => {
            console.log(error)
          })
        }
      })
    }
  }
}
</script>

<style lang="scss">
</style>
